<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item label="年份">
              <a-select v-model="queryParam.years" placeholder="请选择年份" allowClear>
                <a-select-option v-for="item in yearsList" :key="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="月份">
              <a-select v-model="queryParam.months" placeholder="请选择月份" allowClear>
                <a-select-option v-for="item in monthsList" :key="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="星期">
              <a-select v-model="queryParam.week" placeholder="请选择" allowClear>
                <a-select-option v-for="item in weeksList" :key="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </span>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: right; overflow: hidden">
              <a-input-number placeholder="请输入年份" v-model="years" :min="new Date().getFullYear()" style="width:200px;margin-right: 8px"></a-input-number>
              <a-button :disabled="!years" type="primary" @click="addYears" :loading="addLoading">新增年份</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(record,index)=> index"
        :pagination='false'
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :scroll="{ x: 1250 }"
      >
        <span slot="setHolidays" slot-scope="text, record">
          <a-switch checked-children="是" un-checked-children="否" :checked="record.isPublicHolidays == '1'? true:false" @change="onChange(record,3,$event)" />
        </span>
        <span slot="setWorkday" slot-scope="text, record">
          <a-switch checked-children="休息日" un-checked-children="工作日" :checked="record.type == '1'? false:true" @change="onChange(record,4,$event)" />
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>

</template>


<script>
import { getAction , putAction} from '@/api/manage'
import JInput from '@comp/jeecg/JInput'
import moment from 'moment'
import { simpleDebounce } from '@/utils/util'

export default {
  name: 'setWorkday',
  components: {
    JInput,
    moment
  },
  data() {
    return {
      loading: false,
      addLoading: false,
      years:'',
      dataSource:[],
      queryParam:{},
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'workDay',
        },
        {
          title: '星期',
          align: 'center',
          dataIndex: 'week',
        },
        {
          title: '是否为法定节假日',
          align: 'center',
          dataIndex: 'isPublicHolidays',
          scopedSlots: {
            customRender: 'setHolidays'
          }
        },
        {
          title: '是否为工作日',
          align: 'center',
          dataIndex: 'type',
          scopedSlots: {
            customRender: 'setWorkday'
          }
        },
      ],
      yearsList:[],
      monthsList:[
        {value:1,text:'1月'},
        {value:2,text:'2月'},
        {value:3,text:'3月'},
        {value:4,text:'4月'},
        {value:5,text:'5月'},
        {value:6,text:'6月'},
        {value:7,text:'7月'},
        {value:8,text:'8月'},
        {value:9,text:'9月'},
        {value:10,text:'10月'},
        {value:11,text:'11月'},
        {value:12,text:'12月'}
      ],
      weeksList:[
        {value:'星期一',text:'星期一'},
        {value:'星期二',text:'星期二'},
        {value:'星期三',text:'星期三'},
        {value:'星期四',text:'星期四'},
        {value:'星期五',text:'星期五'},
        {value:'星期六',text:'星期六'},
        {value:'星期日',text:'星期日'}
      ],
      url: {
        list: '/cxm/workDay/list',
        add:'/cxm/workDay/public/setDate',
        edit:'/cxm/workDay/edit',
        getYears:'/cxm/workDay/getYears'
      },
    }
  },
  created() {
    this.queryParam = {
      years:new Date().getFullYear(),
      months:new Date().getMonth()+1
    }
    this.loadData(1)
    this.getYears()
  },
  methods: {
    getYears() {
      getAction(this.url.getYears).then((res) => {
        if (res.success) {
          this.yearsList = res.result
        }else {
          this.$message.warning(res.message)
        }
      })
    },
    onChange(record,index,val) {
      let params = {}
      if(index == 3) {
        params = { id:record.id, isPublicHolidays: val? '1':'0' }
      }else if(index == 4) {
        params = { id:record.id, type: val? '0':'1' } //1为false 工作日
      }
      const that = this
      this.$confirm({
        title: `确定更改${index == 3? '法定节假日':'工作日'}吗？`,
        onOk() {
          that.loading = true
          putAction(that.url.edit, params).then((res) => {
            if (res.success) {
              if(index == 3) record.isPublicHolidays = val? '1':'0'
              else if(index ==4) record.type = val? '0':'1'
              that.$message.success(res.message)
            }
            if(res.code===510){
              that.$message.warning(res.message)
            }
            that.loading = false
          })
        },
        onCancel() {},
      })
    },
    searchQuery() {
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {}
      this.loadData(1)
    },
    addYears: simpleDebounce(function() {
      this.addLoading = true
      getAction(this.url.add, {year:this.years}).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.getYears()
        }else {
          this.$message.warning(res.message)
        }
        this.addLoading = false
      })
    }, 500),
    loadData() {
      if(!this.url.list){
        this.$message.error("请设置url.list属性!")
        return
      }
      this.loading = true
      const params = this.getQueryParams()
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
        }
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParam)
      return param
    },
  }
}
</script>

<style scoped>

</style>
